<!DOCTYPE html>
<label id="label-no-for"></label>
<span id="non-labelable"></span>
<form id="form1">
    <input id="input1">
</form>
<form id="form2">
    <label id="parent-of-input2"><input id="input2" ></label>    
    <label id="label-for-input2" for="input2"></label>
    <label id="label-for-input1" for="input1"></label>
    <label id="label-for-non-labelable-element" for="non-labelable"></label>
    <label id="label-for-nonexistent-element" for="invalid"></label>
</form>
</form>
<script src="../include.js"></script>
<script>
    test(() => {
        for (const labelElement of document.querySelectorAll("label")) {
            if (labelElement.form) {
                println(`Form for #${labelElement.id}: #${labelElement.form.id}`);
                println(`label.form is the same as label.control.form for #${labelElement.id}: ${labelElement.form === labelElement.control.form}`);
            } else {
                println(`Form for #${labelElement.id} is null`);
                println(`Control for #${labelElement.id} is null: ${labelElement.control === null}`);
            }
        }
    });
</script>
